﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/config.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=VD7f9qqVQlU2bPZLhycKXeb8"></script>
 

    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }

        #app {
            height: 100%;
            position: absolute;
            top: 0px;
            width: 100%;
        }

        .left {
            width: 248px;
            border-right: 1px solid #dddddd;
            height: 100%;
            float: left;
            overflow: auto;
        }

        .right {
            width: calc(100% - 251px);
            height: 100%;
            float: left;
            overflow: auto;
        }

        .searh_len {
            height: 64px;
            width: 200px;
        }

            .searh_len input {
                margin-top: 10px;
                margin-left: 10px;
                padding-left: 10px;
                height: 34px;
                width: 100%;
            }

        .item {
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #dddddd;
            padding-left: 12px;
            overflow: hidden;
            font-size: 12px;
           
        }
        .item-del {
            float: right;
            height: 28px;
            line-height: 27px;
            color: red;
            margin-top: 8px;
            font-size: 16px;
            margin-right: 5px;
            width: 28px;
            cursor: default;
            border-radius: 40px;
            background-color: #fbfbe3;
            text-align: center
        }
        .setCa .item-del {
            background-color: #008e8e;
            color: white;
        }
        .setCa {
            background-color: #008e8e;
            color: white;
        }
        #map {
            height: calc( 100vh - 1px );
            width: calc( 100% - 250px );
            float: right;
        }
        .showinfor {
            position: fixed;
            right: 10px;
            top: 10px;
            z-index: 9899999;
            width: 380px;
            height: 300px;
            border-radius:5px;
            line-height: 40px;
            
            overflow:auto;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="left">

            <div class="searh_len">
                <input type="text" v-model="path" />

            </div>
            <div>
                <div v-for="item in list2"  :class='{"setCa":item.active}'>
                    <div class="item">
                        <div style="width:180px;float:left;" @click="SetClick(item)">
                          ({{getType(item.GeoType)}})  {{item.GeoName}}
                        </div>

                       
                        <div class="item-del" @click="del(item)" style="">


                            x
                        </div>
                    </div>
                  
                </div>
            </div>
        </div>
        <div class="showinfor" v-html="name">
            </div>
        <div class="right">
           
        </div>
    </div>
    <div id="map"></div>
    <script>
        //ups/ztpls/bl/PullCompany
        var map;
        var listss = [{
            id: 2, name: "默认"
        },{
            id:2,name:"运输线路"
        }, {
                id: 31, name: "工地"
            }, {
                id: 32, name: "消纳场所"
        }, {
                id: 33, name: "限速圈"
            }, {
                id: 34, name: "禁区"
            }, {
                id: 35, name: "停车场"
            }]
           
        var list = new Vue({
            el: '#app',
            data: {
                list: []
                , listCompany: [],
                arrCompany: []
                , path: "",
                name:''
            }, computed: {
                list2() {
                    let arr = [];
                    for (let i = 0; i < this.list.length; i++) {
                        if (this.list[i].GeoName.search(this.path) != -1) {
                            arr.push(this.list[i])
                        }
                    }
                    return arr
                }
            }
            , methods: {
                addlist: function (item) {
                    var ss = item;
                    ss.active = false;
                    this.list.push(ss);
                },
                getType: function (item) {
                    for (var i = 0; i < listss.length; i++) {
                        if (item == listss[i].id) {
                            return listss[i].name;
                        }
                    }
                    return "";
                },
                SetClick: function (item) {
                    
                    this.getCart(item)
                },
                del: function (item) {
                    var ty = {
                        type: "del",
                        data: item,
                        time: new Date().getTime()
                    }
                    window.sendlistData("Area", ty);
                },

                //展示地图
                setMap: function (item) {
                //    console.log(item)
                   
                    for (var i = 0; i < map.getOverlays().length; i++) {
                      
                            map.removeOverlay(map.getOverlays()[i]);
                    
                   
                     }
                    
                    var xc = [
                       
                    ];
                    for (var n1 = 0; n1 < item.length; n1++) {
                        var nos = item[n1].split(" ");
                        var x = new BMap.Point(nos[0], nos[1]);
                        xc.push(x);
                    }
                    var poi = xc[0];
                    map.centerAndZoom(poi, 13);

                    var polygon1 = new BMap.Polygon(xc, { strokeColor: "#55d", strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.5 });
                    map.addOverlay(polygon1);
                },
                //点击事件触发
                setActive: function (item) {
                    
                    for (var n1 = 0; n1 < this.list.length; n1++) {
                        if (item.GeoCode == this.list[n1].GeoCode) {
                           
                            this.list[n1].active = true;
                        } else {
                            this.list[n1].active = false;
                        }

                    }
                   
                },
                //展示json 数据
                getCart: function (item) {
                      
                    if (item.GeoJSON) {
                        this.setMap(item.GeoJSON[0])
                    }
                    this.setActive(item);
                    var resultJson = formatJson(item)
                    this.name = '<pre>' + resultJson + '<pre/>';;
                }

            }
        });
        $(document).ready(function () {

            //获取区域数据
            httppost("ups/ztpls/bl/PullGeoManage", { pageIndex: 1, pageSize: 0, IsDeleted: false, condition: {}, ComapnyName: "1" }

                ,
                function (data) {
                    var listtime = data.data.result;
                    for (var n1 = 0; n1 < listtime.length; n1++) {
                        list.addlist(listtime[n1]);
                    }
                    list.getCart(list.list[0]);

                  //  console.log(data.data.result)
                },
                function (err) { })

        })
        try {
            map = new BMap.Map('map');
            map.enableScrollWheelZoom(true); 
        } catch (e) { }
    </script>
</body>
</html>